<template>
  <div class="suggest-container">
    <el-row :gutter="20">
      <el-col :span="19" :xs="24" :sm="19">
        <div class="config_box">
          <div class="top_config">
            <div class="config_item">
              <div class="item_left">区域</div>
              <div class="item_right">
                <div
                  v-for="item in provideList"
                  :key="item.province_id"
                  class="right_btn_item"
                  @click="provideListClick(item)"
                >
                  <span
                    :class="
                      queryParams.province_id == item.province_id
                        ? 'active'
                        : ''
                    "
                  >
                    {{ item.name }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="is_batch_mode" v-loading="loading">
          <div class="score_du" v-for="item in list">
            <div class="is_title">
              <div class="is_shu"></div>
              {{ item.year }}
            </div>
            <div class="is_head el-row">
              <div class="el-col el-col-12">批次段</div>
              <div class="el-col el-col-6">科目</div>
              <div class="el-col el-col-6">控制分数线</div>
            </div>
            <div>
              <div class="is_content el-row" v-for="d in item.list_data.flat()">
                <div class="el-col el-col-12">
                  <div>{{ d.batch_name }}</div>
                </div>
                <div class="el-col el-col-6">
                  <div>{{ d.type_name }}</div>
                </div>
                <div class="el-col el-col-6">
                  <div>{{ d.score }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5" :xs="24" :sm="5" v-if="device !== 'mobile'">
        <right-wrap></right-wrap>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { province, schoolType, getAdmission } from "@/api/index";
import rightWrap from "./components/rightWrap.vue";
export default {
  name: "",
  components: { rightWrap },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      loading: false,
      provideList: [],
      queryParams: {
        province_id: "",
      },
      list: [],
    };
  },
  created() {},
  mounted() {
    if (localStorage.getItem("userInfo")) {
      this.queryParams.province_id = JSON.parse(
        localStorage.getItem("userInfo")
      ).province_id;
    }
    this.handleSearch();
    this.getdict();
  },
  methods: {
    getdict() {
      province().then((response) => {
        this.provideList = response.data;
      });
    },
    handleSearch() {
      var queryParams = {};
      queryParams.province_id = this.queryParams.province_id;
      this.getList(queryParams);
    },
    getList(queryParams) {
      this.loading = true;
      getAdmission(queryParams).then((response) => {
        this.total = response.total;
        this.list = response.data.reverse();
        this.loading = false;
      });
    },
    //地域
    provideListClick(row) {
      this.queryParams.province_id = row.province_id;
      this.handleSearch();
    },
  },
};
</script>

<style scoped lang="scss">
.suggest-container {
  padding: 20px 0;
  height: 100%;
}
.config_box {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 20px;
}

.is_score_info {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.is_score_info .is_score_item {
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.is_score_info .is_score_item .item_title {
  font-size: 18px;
}

.is_score_info .is_score_item .item_info {
  font-size: 14px;
  color: #0478f1;
  font-weight: 600;
  margin-top: 10px;
}

.is_batch_mode {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.score_du {
  width: 45%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.score_du .is_page {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.score_du .is_head {
  border-bottom: 1px solid #f6f7f7;
  padding: 5px 0;
  margin-top: 20px;
}

.score_du .is_content {
  color: #000;
  padding: 10px 0;
  border-bottom: 1px solid #f6f7f7;
}

.score_du .is_title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.score_du .is_title .is_shu {
  width: 4px;
  height: 20px;
  background-color: #fe6a11;
  border-radius: 3px;
  margin-right: 10px;
}

.config_box .top_config .config_search,
.config_box .top_selected .config_search {
  width: 360px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #efefef;
  background: #f9fafa;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  padding: 16px 14px;
}

.config_box .top_config .config_search .check_btn,
.config_box .top_selected .config_search .check_btn {
  width: 120px;
  height: 100%;
  background-color: #ff6a44;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.config_box .top_config .config_search input[type="text"],
.config_box .top_selected .config_search input[type="text"] {
  padding-left: 10px;
  width: 240px;
  height: 100%;
  outline: none;
  border: none;
}

.config_box .top_config .top_config,
.config_box .top_selected .top_config {
  border-bottom: 2px solid #eff0f0;
}

.config_box .top_config .config_year,
.config_box .top_selected .config_year {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .top_config .config_year .is_choose_year,
.config_box .top_selected .config_year .is_choose_year {
  width: 100px;
  height: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.config_box .top_config .config_item,
.config_box .top_selected .config_item {
  display: flex;
  justify-content: flex-start;
}

.config_box .top_config .config_item .item_left,
.config_box .top_selected .config_item .item_left {
  width: 58px;
  color: #9ca1a6;
  margin-right: 12px;
}

.config_box .top_config .config_item .item_right,
.config_box .top_selected .config_item .item_right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.config_box .top_config .config_item .item_right .item_btn,
.config_box .top_selected .config_item .item_right .item_btn {
  color: #0478f1;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 20px 0 8px;
  cursor: pointer;
}

.config_box .top_config .config_item .item_right .right_btn_item,
.config_box .top_selected .config_item .item_right .right_btn_item {
  color: #606166;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.config_box .top_config .config_item .item_right .right_btn_item span,
.config_box .top_selected .config_item .item_right .right_btn_item span {
  padding: 2px 8px;
}

.config_box .top_config .config_item .item_right .right_btn_item .active,
.config_box .top_selected .config_item .item_right .right_btn_item .active {
  background-color: rgba(201, 225, 251, 0.5);
  color: #0478f1;
}

.config_box .top_selected {
  width: 100%;
  border-top: 2px solid #eff0f0;
  padding: 12px 16px;
}
.config_box .top_config {
  padding: 16px 14px;
}
</style>
